import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import Constants from 'utils'
import { Point } from '../brushes'

const { normalPointsColor } = Constants

const EditRectanblePointView = ({ label, scale, move }) => {
  const moveHOF = i => (x, y) => move(label.id, projectDuck.creators.actionMovePoint, i, x, y)
  return (
    <Container>
      {label.exterior.map((point, index) => (
        <Point
          key={index}
          point={point}
          scale={scale}
          move={moveHOF(index)}
          innerColor={normalPointsColor.inner}
          outerColor={normalPointsColor.outer}
        />
      ))}
    </Container>
  )
}

EditRectanblePointView.propTypes = {
  label: PropTypes.object.isRequired,
  scale: PropTypes.number.isRequired,
  move: PropTypes.func.isRequired,
}

const mapDispatchToProps = {
  move: projectDuck.creators.actionDoAndUpdate,
}

export default withPixiApp(
  connect(
    null,
    mapDispatchToProps,
  )(EditRectanblePointView),
)
